<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复杂查询</title>

    <script type="text/javascript" src="../Guriddo_jqGrid_JS_5.3.1/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../jquery/jquery.cookie.js"></script>

    <script type="text/javascript" src="../Guriddo_jqGrid_JS_5.3.1/src/jquery.jqGrid.js"></script>

    <script type="text/javascript" src="jqgrid-searchbox.js"></script>

    <!--<script type="text/javascript" src="../Guriddo_jqGrid_JS_5.3.1/plugins/"></script>-->

    <script type="text/javascript" src="../Guriddo_jqGrid_JS_5.3.1/src/i18n/grid.locale-cn.js"></script>

    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.js"></script>

    <link rel="stylesheet" type="text/css" media="screen" href="../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../bootstrap/css/bootstrap-datetimepicker.css"/>


    <link rel="stylesheet" type="text/css" media="screen"
          href="../Guriddo_jqGrid_JS_5.3.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../Guriddo_jqGrid_JS_5.3.1/css/ui.jqgrid-bootstrap-ui.css"/>


</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>

</body>

<script type="text/javascript">
    datePick = function (elem) {
        $(elem).datetimepicker();
    };
    var template1 =
        {
            "groupOp": "AND",
            "rules": [
                {"field": "b.name", "op": "bw", "data": "Client 1"},
                {"field": "a.amount", "op": "gt", "data": "20"}
            ]
        };

    var template2 =
        {
            "groupOp": "AND",
            "rules": [
                {"field": "b.name", "op": "eq", "data": "Client 2"},
                {"field": "a.id", "op": "le", "data": "10"}
            ]
        };


    $(document).ready(function () {


        $("#jqGrid").jqGrid({
            url: '/api/user/index',
            mtype: "GET",
            styleUI: 'Bootstrap',
            datatype: "json",
            hidegrid: true,//控制显示隐藏表格按钮
            autowidth: true,

            autoHeight: true,
            colModel: [
                {
                    label: '用户ID',
                    name: 'userId',
                    index: 'u.userId',
                    key: true,
                    width: 75,
                    align: 'center',
                    searchtype: "integer"
                },
                {label: '用户名', name: 'userName', index: 'u.userName', width: 150, align: 'center'},
                {label: '手机号码', name: 'userPhonenum', index: 'u.userPhonenum', width: 150, align: 'center'},
                {
                    label: '注册日期',
                    name: 'userRegdate',
                    search: true,
                    index: 'u.userRegdate',
                    width: 150,
                    searchoptions: {
                        dataInit: datePick,
                        attr: {title: 'Select Date'},
                        sopt: ['ge', 'gt', 'le', 'lt']
                    },
                    formatter: 'date',
                    formatoptions: {srcformat: 'Y-m-d H:i:s', newformat: 'm/d/Y  H:i:s'}, align: 'center'
                },
                {
                    label: '余额',
                    name: 'userMoney',
                    index: 'ub.userMoney',
                    width: 150,
                    align: 'center',
                    searchtype: "number"
                }
            ],
            viewrecords: true,
            caption: "用户列表",
            height: '100%',
            rowNum: 20,
            pager: "#jqGridPager",
            jsonReader: {
                root: "data.rows",
                page: "data.page",
                total: "data.total",
                records: "data.records",
            },
        });

        // $("#jqGrid").jqGrid('navGrid', '#jqGridPager',
        //     {add: false, edit: false, del: false, search: true}
        // );

        var tmplNames = $.cookie("tmplName");
        var tmplFilters = new Array();
        if (tmplNames) {
            tmplNames = tmplNames.split(",");
            $.each(tmplNames, function (index, value) {
                tmplFilters.push(JSON.parse($.cookie("searchTmpl_" + value)));
            });

        }

        console.info(tmplFilters);

        $("#jqGrid").jqGrid('navGrid', '#jqGridPager',
            {add: false, edit: false, del: false, search: true},
            {},
            {},
            {},
            {
                multipleSearch: true, multipleGroup: true,
                showQuery: false,
                // set the names of the template
                "tmplNames": tmplNames,
                // set the template contents
                "tmplFilters": tmplFilters
            });

        // $("#mysearch").filterGrid('#jqGrid', {
        //     gridModel: false,
        //     filterModel: [{
        //         label: 'search',
        //         name: 'searchVal',
        //         stype: 'text'
        //     }],
        //     autosearch: true,
        //     url: 'url?自己的固定参数'
        // });

    });

</script>
</html>